var username = '';
var phone = '';
window.onload = function () {
    username = getQueryString("username");
    phone = getQueryString("phone");
    vm.loadHotBank();
    vm.loadDatas();
    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if(scrollTop + windowHeight == scrollHeight) {
            vm.loadMore();
        }
    });
};

function escape2Html(str) {
    var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]); return null;
}

var vm = new Vue({
    el:"#app",
    data:{
        cards:[],
        hotBank:[],
        loadTips:"加载更多..",
        loading:false,
        page:1,
        limit:6
    },
    methods:{
        loadHotBank:function () {
            $.ajax({
                url:"/thmlfApi/card/hotBank",
                dataType:"JSON",
                success:function (result) {
                    if (result.code == 200){
                        vm.hotBank = result.result;
                        // document.getElementById('Gallery').removeChild()
                        var Gallery = document.getElementById("Gallery");
                        var dianDiv = document.getElementById("dian");
                        while(Gallery.hasChildNodes()) //当div下还存在子节点时 循环继续
                            Gallery.removeChild(Gallery.firstChild);
                        while (dianDiv.hasChildNodes())
                            dianDiv.removeChild(dianDiv.firstChild);
                        for (var i = 0;i<vm.hotBank.length;i++){
                            var data = vm.hotBank[i];
                            var div = document.createElement('div');
                            div.className = 'mui-slider-item';
                            var ul = document.createElement('ul');
                            ul.setAttribute('class','mui-table-view mui-grid-view mui-grid-9');
                            for (var j = 0;j<data.length;j++){
                                var bankData = data[j];
                                var li = document.createElement('li');
                                li.setAttribute('class','mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3');
                                var a = document.createElement('a');
                                a.setAttribute('href',bankData.bankUrl);
                                var span = document.createElement('span');
                                var img = document.createElement('img');
                                img.setAttribute('src',bankData.bankIcon);
                                img.setAttribute('style','width: 52%;height: 32%;');
                                span.appendChild(img);
                                a.appendChild(span);
                                var div2 = document.createElement('div');
                                div2.setAttribute('class','mui-media-body');
                                div2.setAttribute('style','font-size: 10px;');
                                div2.innerText = bankData.bankName;
                                a.appendChild(div2);
                                li.appendChild(a);
                                ul.appendChild(li);
                            }
                            div.appendChild(ul);
                            var dian = document.createElement('div');
                            if (i == 0){
                                dian.setAttribute('class','mui-indicator mui-active');
                            }else {
                                dian.setAttribute('class','mui-indicator');
                            }
                            dianDiv.appendChild(dian);
                            document.getElementById('Gallery').appendChild(div);
                        }
                    }else
                        alert(result.message);
                },
                error:function (e) {
                    console.log("error",e);
                    alert("请求失败");
                }
            });
        },
        loadDatas:function () {
            vm.page = 1;
            vm.limit = 6;
            $.ajax({
                url:"/thmlfApi/card/list",
                dataType:"JSON",
                success:function (result) {
                    if (result.code == 200){
                        for (var i = 0;i<result.result.length;i++){
                            var data = result.result[i];
                            if (data.cardDiscount == null){
                                continue;
                            }else {
                                data['cardDiscount'] = result.result[i].cardDiscount.split("##");
                                vm.cards.push(data);
                            }
                        }
                    }else
                        alert(result.message);
                },
                error:function (e) {
                    console.log("error",e);
                    alert("请求失败");
                }
            });
        },
        loadMore:function () {
            vm.loading = true;
            vm.page = vm.page+1;
            console.log("加载更多");
            $.ajax({
                url:"/thmlfApi/card/list?page="+vm.page+"&limit="+vm.limit,
                dataType:"JSON",
                success:function (result) {
                    vm.loading = false;
                    if (result.code == 200){
                        if (result.result.length != 0)
                            for (var i = 0;i<result.result.length;i++){
                                var data = result.result[i];
                                if (data.cardDiscount != null){
                                    data['cardDiscount'] = result.result[i].cardDiscount.split("##");
                                }
                                vm.cards.push(data);
                            }
                        else {
                            vm.page = vm.page - 1;
                            vm.loadTips = "没有更多数据了";
                        }
                    }else
                        alert(result.message);
                },
                error:function (e) {
                    vm.loading = false;
                    vm.page = vm.page - 1;
                    console.log("error",e);
                    alert("请求失败");
                }
            });
        },
        open:function (url,id) {
            if (username == null || username.length<2 || phone == null || phone.length != 11){
                alert("环境异常，请重试");
                return;
            }
            $.ajax({
                url:'/thmlfApi/card/record',
                type:'POST',
                data:{'recordUsername':username,'recordPhone':phone,'typeId':id},
                success:function (result) {
                    if (result.code == 200)
                        window.location.href = url;
                    else
                        alert(result.message);
                },
                error:function (e) {
                    console.error("error",e);
                    alert("请求失败");
                }
            })
        }
    }
});
